<template>
  <div id="app">
    <transition :name="transitionName">
        <router-view/>  
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
   data(){
      return {
          transitionName:'',
          whiteList: ['p13']
      }
  },
  watch: {
    $route(to, from) {
      if (to.name === 'home') {
        this.transitionName = 'slide-right';
      } else {
        this.transitionName = 'slide-left';
      }
      if (this.whiteList.indexOf(to.name) > -1) {
        this.transitionName = ''
      }
    }
  },
  mounted () {
    this.resize()
    window.onresize = () => {
      this.resize()
    }
  },
  methods: {
    resize () {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
        var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    }
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body,#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 300ms;
}
.slide-right-enter {
  // opacity: 0;
  transform: translateX(-100%);
}
.slide-right-leave-active {
  // opacity: 0;
  transform: translateX(100%);
}
.slide-left-enter {
  // opacity: 0;
  transform: translateX(100%);
}
.slide-left-leave-active {
  // opacity: 0;
  transform: translateX(-100%)
}
.btn {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  background-image: none;
  padding: 16px 36px;
  font-size: .5rem;
  border-radius: 20px;
  border: 3px solid transparent;
  text-decoration: none;
  user-select: none;
  color: #e3f2fd;
    border-color: #1e88e5;
    background: linear-gradient(to bottom, #42a5f5 0%, #006BE4 100%);
    box-shadow: inset 0 3px #bbdefb, 0 3px 6px rgba(0, 0, 0, 0.2);
  &,
  &:active,
  &.active {
    &:focus {
      outline: thin dotted;
      outline-offset: -6px;
    }
  }
  
  &:hover,
  &:focus,
  &.focus {
    text-decoration: none;
    color: #fff;
  }
  
  &:active,
  &.active {
    outline: 0;
    background-image: none;
    color: #c7e5ff;
    background: linear-gradient(to bottom, #42a5f5 0%, #006BE4 100%);
  }
  
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
  }
}
</style>
